<template>
  <div class="box">
    <div class="imgBox">
      <img src="@/assets/icons/chahua.png" class="left-img" />
    </div>
    <div class="right-img">
      <div style="
          background-color: white;
          border-radius: 16px;
          padding: 42px;
          box-shadow: 0 0 8px #ccc2c2;
        ">
        <h1 style="margin-bottom: 40px">登录</h1>
        <div>
          <p class="subtitle">登录账号</p>
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="username" style="margin-bottom: 15px"
            autocomplete="on"></el-input>
        </div>
        <div>
          <p class="subtitle">登录密码</p>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" style="margin-bottom: 15px"
            autocomplete="on" show-password></el-input>
        </div>
        <div>
          <v-btn block dark depressed elevation="13" style="margin-bottom: 30px; font-weight: bold"
            @click="login">登录</v-btn>
          <div style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
            ">
            <a class="span_register" href="/register" style="text-decoration: none">注册新账号→</a>
            <a class="span_register" href="/" style="text-decoration: none">首页</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserService from "@/service/UserService";
import StudentService from "@/service/StudentService";
import { setToken } from "@/util/getToken";
import { Message } from "element-ui";
export default {
  name: "LoginView",

  data() {
    return {
      username: JSON.parse(sessionStorage.getItem("userInfo"))?.username,
      password: JSON.parse(sessionStorage.getItem("userInfo"))?.password,
      userId: ""
    };
  },

  mounted() { },

  methods: {
    login() {
      const userInfo = {
        username: this.username,
        password: this.password,
        userType: "student",
      };
      UserService.login(userInfo)
        .then((res) => {
          if (res.code == 0) {
            setToken("loginCookie", res.data);
            Message({
              message: "登入成功",
              type: "success",
            });
            this.getInfo()
            this.$router.replace("/search");
          } else {
            this.username = "";
            this.password = "";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getInfo() {
      const params = { username: this.username, userType: "student" };
      const response = await UserService.getUserInfo(params);
      if (response.code == 0) {
        sessionStorage.setItem("userInfo", JSON.stringify(response.data));
        sessionStorage.setItem("userId", response.data.id);
        this.userId = response.data.id
        this.getStudentInfo();
      }
    },
    async getStudentInfo() {
      try {
        const params = { id: this.userId };
        const response = await StudentService.getStudentInfo(params);
        if (response.code == 0) {
          sessionStorage.setItem(
            "studentDetail",
            JSON.stringify(response.data)
          );
        }
      } catch (error) {
        Message.error(error);
      }
    }
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-image: url(../assets/icons/background1.png);
  background-size: 100% 100%;
}

.imgBox {
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.left-img {
  width: auto;
  position: relative;
  top: 10%;
}

.right-img {
  /* width: 40%; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subtitle {
  color: #999999;
  font-size: 12px;
  margin-bottom: 12px;
}

.span_register {
  font-size: 12px;
  color: #101010;
  font-weight: bold;
}

.span_register:hover {
  color: blue;
  cursor: pointer;
}
</style>
